<template>
  <van-notice-bar left-icon="volume-o" :scrollable="false">
    <van-swipe
      vertical
      class="notice-swipe"
      :autoplay="3000"
      :show-indicators="false"
    >
      <van-swipe-item v-for="item in listData" :key="item.sort">{{
        item.text
      }}</van-swipe-item>
    </van-swipe>
  </van-notice-bar>
</template>

<script>
export default {
  name: 'MyNotice',
  data() {
    return {
      list: [
        {
          sort: 1,
          info: 'has won  3000 coins and senior sale  discount for svip'
        },
        {
          sort: 2,
          info: 'has won 1000 coins and medium sale  discount for svip'
        },
        {
          sort: 3,
          info: 'has won flash sale discount and free vip'
        },
        {
          sort: 4,
          info: 'has won 10000 coins and super sale discount for svip'
        },
        {
          sort: 5,
          info: 'has won 5000 coins and super gifts'
        },
        {
          sort: 6,
          info: 'has won minor discount for vip and 500 coins'
        },
        {
          sort: 7,
          info: 'has won 5000 coins and super sale discount for vip'
        },
        {
          sort: 8,
          info: 'has won 10000 coins and senior sale discount for vip'
        },
        {
          sort: 9,
          info: 'has won a huge gift package full of super gifts'
        },
        {
          sort: 10,
          info: 'has won super discount of svip and git package'
        }
      ]
    }
  },
  computed: {
    listData() {
      const arr = this.list.map((val) => {
        const random1 = Math.floor(Math.random() * 90 + 10)
        const random2 = Math.floor(Math.random() * 10)

        const text = `${random1}XX${random2} ${val.info}`
        val.text = text
        return val
      })

      return arr
    }
  },
  created() {},
  beforeUnmount() {},
  methods: {}
}
</script>
<style lang="less" scoped>
.van-notice-bar {
  width: 6rem;
  margin: 0 auto 1.2rem;
  border-radius: 1rem;
  .notice-swipe {
    height: 0.28rem;
    line-height: 0.28rem;
  }
}
</style>
